<template>
	<view class="">
		<view class="has_discount">
			<view class="has_discount_title">
				选择优惠券
			</view>
			<view class="list" v-for="(item,index) in discountlist">
				<image src="../../static/image/mine/index/order_discount1.png" mode=""></image>
				<view class="list_content">
					<view class="price">
						<view class="price">
							<view class="price_p">
								￥<text>{{item.price}}</text>
							</view>
							<view class="price_rule">
								{{item.rule}}
							</view>
						</view>
					</view>
					<view class="info">
						<view class="info_title">{{item.title}}</view>
						<!-- <view class="info_detail">{{item.rule}}</view> -->
						<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<view class="touse">
						<view class="residue">
							剩余{{item.day}}天
						</view>
						<view class="true" @tap="changediscount(index)">
							<image v-if="item.flag" src="../../static/image/mine/index/true.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="make_sure">
			<view class="btn">
				确认
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			discountindex: 1000,
			discountlist: [
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				},
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				},
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				}
			]
		}
	},
	methods: {
		tocenter () {
			uni.navigateTo({
				url: '/pageD/discount/center'
			})
		},
		changediscount(index) {
			this.discountlist.forEach( (item) => {
				item.flag = false
			})
			this.discountlist[index].flag = true
		}
	}
};
</script>

<style lang="less" scoped>
.has_discount {
	overflow: hidden;
	margin-bottom: 150upx;
}
.has_discount_title {
	width: 100%;
	font-size: 32upx;
	color: #333333;
	padding-left: 15upx;
	box-sizing: border-box;
	line-height: 40upx;
	margin-top: 20upx;
}
.list {
	width: calc(100% - 30upx);
	height: 186upx;
	margin: auto;
	margin-top: 20upx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
	.list_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		.price {
			width: 220upx;
			height: 140upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// font-size: 32upx;
			// color: #ffffff;
			// text-align: center;
			// line-height: 140upx;
			.price_p {
				font-size: 28upx;
				color: #FFFFFF;
				text {
					font-size: 40upx;
					font-weight: bold;
				}
			}
			.price_rule {
				margin-top: 10upx;
				font-size: 24upx;
				color: #FFFFFF;
				white-space: nowrap;
			}
		}
		.info {
			width: 340upx;
			height: 100%;
			padding: 20upx 0;
			padding-left: 25upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.info_title {
				font-size: 28upx;
				color: #000;
				line-height:28upx;
			}
			.info_detail {
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
			.info_date {
				margin-top: 20upx;
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
		}
			.touse {
				text-align: right;
				position: absolute;
				right: 20upx;
				// top: 25upx;
				top: 50%;
				transform: translateY(-50%);
				.residue {
					font-size: 28upx;
					color: #f73e2f;
				}
				.true {
					float: right;
					width: 32upx;
					height: 32upx;
					border: 2upx solid #E1E1E1;
					border-radius: 50%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		// .getdiscount {
		// 	width: 120upx;
		// 	// background-color: #f73e2f;
		// 	background: linear-gradient(to right, #fe7b71 0%,#f73e2f 100%);
		// 	height: 40upx;
		// 	border-radius: 20upx;
		// 	text-align: center;
		// 	line-height: 40upx;
		// 	color: #FFFFFF;
		// 	font-size: 24upx;
		// }
	}
	// .list_content {
	// 	width: 100%;
	// 	height: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	display: flex;
	// 	.price {
	// 		width: 186upx;
	// 		height: 186upx;
	// 		font-size: 32upx;
	// 		color: #ffffff;
	// 		text-align: center;
	// 		line-height: 186upx;
	// 		text {
	// 			font-size: 40upx;
	// 			font-weight: bold;
	// 		}
	// 	}
	// 	.info {
	// 		width: 326upx;
	// 		height: 100%;
	// 		padding-left: 25upx;
	// 		padding-top: 40upx;
	// 		box-sizing: border-box;
	// 		.info_title {
	// 			font-size: 32upx;
	// 			color: #333333;
	// 			font-weight: bold;
	// 			line-height: 32upx;
	// 		}
	// 		.info_detail {
	// 			font-size: 24upx;
	// 			color: #333333;
	// 			line-height: 24upx;
	// 			margin-top: 14upx;
	// 			margin-bottom: 20upx;
	// 		}
	// 		.info_date {
	// 			font-size: 24upx;
	// 			color: #333333;
	// 			line-height: 24upx;
	// 		}
	// 	}
	// 	.touse {
	// 		text-align: right;
	// 		position: absolute;
	// 		right: 20upx;
	// 		top: 25upx;
	// 		.residue {
	// 			font-size: 28upx;
	// 			color: #f73e2f;
	// 		}
	// 		.true {
	// 			float: right;
	// 			width: 32upx;
	// 			height: 32upx;
	// 			border: 2upx solid #E1E1E1;
	// 			border-radius: 50%;
	// 			box-sizing: border-box;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;
	// 			image {
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}
	// 	}
	// }
}
.no_more_discount {
	margin-top: 30upx;
	font-size: 28upx;
	color: #999999;
	text-align: center;
}
.nodiscount {
	text-align: center;
	image {
		display: block;
		margin: auto;
		width: 240upx;
		height: 200upx;
	}
	.nodiscount_detail {
		margin-top: 50upx;
		font-size: 24upx;
		color: #999999;
		text {
			color: #f73e2f;
			text-decoration:underline;
		}
	}
}
.make_sure {
	width: 100%;
	height: 130upx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.btn {
		width: calc(100% - 60upx);
		height: 88upx;
		border-radius: 10upx;
		background: linear-gradient(to right, #f73e2f 0% ,#fc5c2f 100%);
		box-shadow: 0 0 6upx 0 #fc5c2f;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
	}
}
</style>
